<template>
	<!-- 选择栏目 -->
	<el-select v-model="lanMuHao" placeholder="请选择栏目" style="margin: 5px 10px;">
		<el-option v-for="l of lanMuXuanZe" :label="l.lanMuBiaoTi" :value="l.lHao"></el-option>
	</el-select>
	<el-table :data="wenZhangLieBiaoChuLi.filter(shuJu => !souSuo || shuJu.biaoTi.toLowerCase().includes(souSuo.toLowerCase()))"
		@selection-change="duoXuanHanShu"
		style="width: 100%"
		:row-key="x=>x.wHao">
		<el-table-column
		  type="selection"
		  width="50"
		  align="right"
		  :reserve-selection="true"></el-table-column>
		<el-table-column prop="wHao" label="编号" width="80" align="center">
		</el-table-column>
		<el-table-column prop="lanMuBiaoTi" label="所属栏目" width="80" align="center">
		</el-table-column>
		<el-table-column prop="biaoTi" label="标题">
		</el-table-column>
		<el-table-column prop="muBan" label="栏目模板" width="180" align="center">
		</el-table-column>
		<el-table-column width='200' align="center">
			<template #header>
				<el-input v-model="souSuo" size="mini" placeholder="输入标题关键字搜索" />
			</template>
			<template #default="scope">
				<el-button type="info" size="mini" title="编辑" @click="yuLanYeMian(scope.row.wHao)" icon="el-icon-view"
					circle></el-button>
				<el-button type="primary" size="mini" title="编辑" @click="bianJiWenZhang(scope.row)" icon="el-icon-edit"
					circle></el-button>
				<el-button size="mini" type="danger" title="删除" @click="shanChuWenZhang('danTiao', scope.row.wHao)"
					icon="el-icon-delete" circle></el-button>
			</template>
		</el-table-column>
	</el-table>
	
	<div class="flex-align-center">
		<!-- 批量删除 -->
		<el-button size="small" type="danger" @click="shanChuWenZhang('piLiang')" style="margin: 10px;">批量删除</el-button>
		<div class="flex-align-center flex-justify-center" style="width: 80%;">
			<el-pagination background layout="prev, pager, next" :page-size='meiYeShuLiang' v-model:current-page='dangQianYe'
				:total="zongShu">
			</el-pagination>
		</div>
	</div>
	
	<el-dialog title="修改内容" v-model="xiuGaiKuangXianShi" width=70% destroy-on-close center>
		<zeng-wen-zhang @guanBiTanChuang="xiuGaiKuangXianShi = false" @shuaXin="xiuGaiWanCheng"></zeng-wen-zhang>
	</el-dialog>
	<el-dialog title="提示" v-model="shanChuKuangXianShi" width=30% destroy-on-close center>
		<span>删除内容{{shanChuHangHao}}？</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="shanChuKuangXianShi = false">取 消</el-button>
				<el-button type="primary" @click="queRenShanChu(shanChuHangHao)">确定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		provide,
		inject
	} from 'vue';
	import zengWenZhang from './zengWenZhang.vue';
	export default {
		setup() {
			let wenZhangLieBiao = reactive([]);
			let hang = reactive([]);
			let duoJiLanMu = reactive([]);
			let xiuGaiKuangXianShi = ref();
			let shanChuKuangXianShi = ref();
			let shanChuHangHao = ref();
			let lanMuXuanZe = reactive([{
				lHao: 0,
				lanMuBiaoTi: '所有文章'
			}]);
			xiuGaiKuangXianShi.value = false;
			shanChuKuangXianShi.value = false;
			shanChuHangHao.value = '';
			let zhuJiDiZhi = inject('zhuJiDiZhi');
			let wenZhangShuJu = async () => {
				await fetch(zhuJiDiZhi + 'sytht/jieKou/chaWenZhang', {
						method: 'get',
						headers: {
							'Content-Type': 'application/json'
						},
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(a) {
						return a.json();
					})
					.then(function(json) {
						wenZhangLieBiao.splice(0, )
						Object.assign(wenZhangLieBiao, json);
						wenZhangLieBiao.forEach( x => {
							lanMuXuanZe.forEach( i => {
								if (x.lHao == i.lHao) x.lanMuBiaoTi = i.lanMuBiaoTi;
							})
						})
					})
			}
			onMounted(() => {
				//获取栏目信息
				fetch(zhuJiDiZhi + 'sytht/jieKou/chaLanMu', {
						method: 'get',
						headers: {
							'Content-Type': 'application/json'
						},
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(a) {
						return a.json();
					})
					.then(function(b) {
						for (let x of b) {
							let a = {};
							a.lHao = x.lHao;
							a.lanMuBiaoTi = x.biaoTi;
							lanMuXuanZe.push(a);
						}
						b.forEach((v, i, arr) => {
							arr.forEach(x => {
								if (v.fHao != 0 && x.lHao == v.fHao) {
									x.zi ? x.zi : x.zi = [];
									x.zi.push(v);
									v.chongFu = true;
								}
							})
						})
						duoJiLanMu.push(...b);
						wenZhangShuJu();
					})
			});
			const xiuGaiWanCheng = () => {
				wenZhangShuJu()
			}
			provide('hang', hang);
			const bianJiWenZhang = (r) => {
				Object.assign(hang, r);
				xiuGaiKuangXianShi.value = true;
			};
			return {
				xiuGaiKuangXianShi,
				shanChuKuangXianShi,
				shanChuHangHao,
				wenZhangLieBiao,
				bianJiWenZhang,
				zhuJiDiZhi,
				xiuGaiWanCheng,
				wenZhangShuJu,
				lanMuXuanZe,
				duoJiLanMu
			}
		},
		data() {
			return {
				meiYeShuLiang: 9,
				dangQianYe: 1,
				souSuo: '',
				lanMuHao: 0,
				shanChuLeiXing: '',
				xuanZhongShuZu: []
			}
		},
		components: {
			zengWenZhang: zengWenZhang
		},
		computed: {
			wenZhangLieBiaoChuLi() {
				return this.wenZhangLieBiao.filter(x => {
					let jieGuo;
					if (this.lanMuHao === 0) jieGuo = true;
					if (x.lHao == this.lanMuHao) jieGuo = true;
					
					function diGui(l) {
						if (x.lHao == l.lHao) {
							jieGuo = true;
							return;
						}
						if (l.zi) {
							l.zi.forEach(z => diGui(z))
						}
					}
					for (let d of this.duoJiLanMu) {
						if (d.lHao == this.lanMuHao) {
							diGui(d);
							break;
						}
					}
					return jieGuo;
				})
				.slice((this.dangQianYe - 1) * this.meiYeShuLiang, (this.dangQianYe - 1) * this.meiYeShuLiang + this.meiYeShuLiang)
			},
			zongShu() {
				return this.wenZhangLieBiao.length;
			}
		},
		methods: {
			async shanChuQingQiu(shuJu) {
				await fetch(this.zhuJiDiZhi + 'sytht/jieKou/shanWenZhang', {
						method: 'post',
						body: JSON.stringify(shuJu),
						headers: {
							'Content-Type': 'application/json'
						},
						mode: 'cors',
						credentials: 'include'
					})
					.then(function(a) {
						return a.text();
					})
					.then(function(b) {
						if (b.includes('登录页面')) {
							alert('请登录');
						};
						console.log(b);
					});
				this.wenZhangShuJu()
			},
			yuLanYeMian(wHao) {
				open(this.zhuJiDiZhi + 'wenZhang-' + wHao)
			},
			shanChuWenZhang(leiXing, hao) {
				if (leiXing == 'danTiao') {
					this.shanChuLeiXing = 'danTiao';
					this.shanChuHangHao = hao;
					this.shanChuKuangXianShi = true
				}
				if (leiXing == 'piLiang') {
					let m = this.xuanZhongShuZu
					this.shanChuLeiXing = 'piLiang';
					this.shanChuHangHao = '';
					m.forEach( x => {
						this.shanChuHangHao += x.wHao + ','
					})
					this.shanChuKuangXianShi = true;
				}
			},
			queRenShanChu(hao) {
				if (this.shanChuLeiXing == 'danTiao') {
					let shuJu = [hao];
					this.shanChuQingQiu(shuJu)
				}
				if (this.shanChuLeiXing == 'piLiang') {
					let shuJu = [];
					this.xuanZhongShuZu.forEach(x => {
						shuJu.push(x.wHao);
					})
					this.shanChuQingQiu(shuJu);
				}
				this.shanChuKuangXianShi = false;
				this.shanChuLeiXing = '';
			},
			duoXuanHanShu(zhi) {
				this.xuanZhongShuZu = zhi;
			},
		}
	}
</script>
<style>
	.el-table {
		height: 84%;
		overflow: auto;
	}
	.el-table tbody tr:hover>td {
		background-color:#e9f2f9!important
	}
	.flex-align-center {
		display: flex;
		align-items: center;
	}
	.flex-justify-center {
		display: flex;
		justify-content: center;
	}

	.el-checkbox__inner {
		border: 1px solid #ababab;
	}
</style>
